<template>
  <div class="contain">
    <div class="navbar">
      <block v-for="(item,index) in tabBar" :key="index">
        <div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick">
          <div class="navbar_title">{{item.title}}</div>
        </div>
      </block>
      <div class="navbar_slider" :class="navbarSliderClass"></div>
    </div>
    <div class="btnIcon">
      <img :src="leftIcon ? '../../../../static/img/left.png':'../../../../static/img/left-active.png'" @click.stop="leftBtnIcon">
      <img :src="rightIcon ? '../../../../static/img/right.png':'../../../../static/img/right-active.png'" @click.stop="rightBtnIcon">
    </div>
    <swiper class="content" :duration="200" :style="'height:'+contentHeight" @change="swiperChange" :current="currentTab" @animationfinish="onAnimationfinish">
      <swiper-item class="content_item">
          <div class="swiperImg">
            <img class="swiper-img" src="../../../../static/img/minibus.png">
            <div class="swiper-car">
              <div class="swiper-carInfo">
                <span>500公斤</span>
                <span class="swiper-carInfoI">载重</span>
              </div>
              <div class="swiper-carInfo">
                <span>1.8*1.3*1.1米</span>
                <span class="swiper-carInfoI">长*宽*高</span>
              </div>
              <div class="swiper-carInfo">
                <span>2.6方</span>
                <span class="swiper-carInfoI">载货体积</span>
              </div>
            </div>
          </div>
      </swiper-item>
      <swiper-item>
        <div>
          222
        </div>
      </swiper-item>
      <swiper-item>
        <div>
          333
        </div>
      </swiper-item>
      <swiper-item>
        <div>
          444
        </div>
      </swiper-item>
    </swiper>
    <div class="carType">
      <div>特殊车型</div>
      <div class="carTypeInfo" @click="showCarType">{{CarType}} <span class="BtnIcon"></span> </div>
    </div>
    <!--地图-->
    <div class="MyDress">
      <div class="myDress"><span class="stateIcon"></span><div @click="onChangeAddress" v-text="chooseAddress" class="stateDress"></div></div>
      <div class="changDress"><span class="endIcon"></span><div @click="onChangeEndAddress" v-text="endDress" class="endDress"></div></div>
    </div>
    <!--价格-->
    <div class="price">
      <div class="cost">￥50.00</div>
      <div class="sale"  @click="saleInfo">
        <p class="saleInfo">价格明细</p>
        <p>优惠<span class="saleInfo">10.0元</span></p>
      </div>
    </div>
    <div class="btn">
      <div class="nowCar" @click.stop="showMap">现在用车</div>
      <div class="yx" @click.stop="changTime">预约</div>
    </div>
    <!--车型选择-->
    <div class="car-type" v-if="CarTypeState">
      <div class="car-tit">特殊车型 <span class="car-close" @click="ClickCarType"></span></div>
      <checkbox-group @change="checkboxChange($event)">
        <label class="checkbox" v-for= "(list,index) in items" :key="index">
          <checkbox :value="list.value" :checked="list.checked"/>{{list.value}}
        </label>
      </checkbox-group>
      <div class="car-list">
        搬运(与司机另议) <radio value="by"/> <span style="color: #13bf6c;">费用参考</span>
      </div>
      <div class="car-list">
        返程(附加40%运费) <radio value="by"/>
      </div>
      <div class="car-list">
        备注: <input type="text" placeholder="小叮嘱" class="car-taps">
      </div>
      <div class="car-btn" @click="typeEnterBtn">确定</div>
    </div>

    <div class="appointmentTimeContainer" v-if="timeFlag">
      <div class="change-time-title">
        <div @click.stop = "closeTime">取消</div>
        <div>请选择预约时间</div>
        <div @click.stop = "enterTime">确定</div>
      </div>
      <picker-view indicator-class="driverChecked" style="width: 100%; height: 400rpx;" @change="bindTimeChange">
        <picker-view-column >
          <view v-for="(item, index) in date" :key='index' class='droverCountText'>
            {{item}}
          </view>
        </picker-view-column>
        <picker-view-column >
          <view v-for="(item, index) in hours" :key='index' class='droverCountText'>
            {{item}}
          </view>
        </picker-view-column>
        <picker-view-column >
          <view v-for="(item, index) in minute" :key='index' class='droverCountText'>
            {{item}}分
          </view>
        </picker-view-column>
      </picker-view>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      tabBar: [
        { 'title': '面包车' },
        { 'title': '大面包车' },
        { 'title': '小型货车' },
        { 'title': '大型货车' }
      ],
      items: [
        {name: 'jc', value: '加长'},
        {name: 'yb', value: '雨布'},
        {name: 'tc', value: '推车'},
        {name: 'ws', value: '网绳'},
        {name: 'bcz', value: '半拆座'},
        {name: 'bccz', value: '不拆座'}
      ],
      CarTypeState: false,
      activeIndex: 0,
      leftIcon: true,
      rightIcon: false,
      currentTab: 0,
      winWidth: 0,
      winHeight: 0,
      chooseAddress: '',
      endDress: '请输入目的地',
      latitude: '',
      longitude: '',
      endLongitude: '',
      endLatitude: '',
      date: ['今天', '明天', '后天'], // 时间选择器
      hours: [],
      minute: [],
      aboutTime: [],
      CarType: '特殊车型',
      timeFlag: false
    }
  },
  onLoad () {
    let res = wx.getSystemInfoSync()
    this.winWidth = res.windowWidth
    this.winHeight = res.windowHeight
    let that = this
    const QQMapWX = require('../../../../static/qqmap-wx-jssdk1.0/qqmap-wx-jssdk')
    let demo = new QQMapWX({
      key: 'OPMBZ-W7R3X-YCW47-ZXZHL-2ICGF-D2FNL'
    })
    console.log(this.activeIndex)
    wx.getLocation({
      type: 'wgs84',
      success (res) {
        that.latitude = res.latitude
        that.longitude = res.longitude
        // 逆地址解析
        demo.reverseGeocoder({
          location: {
            latitude: that.latitude,
            longitude: that.longitude
          },
          success: function (res) {
            that.startAddress = res.result.address
            that.chooseAddress = res.result.formatted_addresses.recommend
          },
          fail: function (res) {
            // console.log(res)
          },
          complete: function (res) {
            // console.log(res)
          }
        })
      }
    })
    this.selectTimeHandler(0, 0, 0)
  },
  methods: {
    bindTimeChange (e) {
      this.aboutTime = e.mp.detail.value
      // console.log('预约时间', this.aboutTime)
      // 今天样式
      if (e.mp.detail.value[0] === 0 && e.mp.detail.value[1] === 0) {
        this.selectTimeHandler(0, 0)
      } else if (e.mp.detail.value[0] === 0 && e.mp.detail.value[1] !== 0) {
        this.selectTimeHandler(0, e.mp.detail.value[1])
      } else if (e.mp.detail.value[0] !== 0) {
        this.selectTimeHandler(e.mp.detail.value[0], e.mp.detail.value[1], 0)
      }
    },
    selectTimeHandler (dateParams, hoursParams, minutesParams) {
      const data = new Date()
      const hour = data.getHours()
      // 今天样式
      this.hours.length = 0
      this.minute.length = 0
      // console.log(dateParams, hoursParams, minutesParams)
      if (dateParams === 0 && hoursParams === 0) {
        this.hours.push('现在')
        for (let i = hour + 1; i < 24; i++) {
          this.hours.push(i + '点')
        }
        // this.setData({
        //     this.hours,
        //   minute
        // })
      } else if (dateParams === 0 && hoursParams !== 0) {
        this.hours.push('现在')
        for (let i = hour + 1; i < 24; i++) {
          this.hours.push(i + '点')
        }
        for (let i = 0; i < 60; i += 10) {
          this.minute.push(i)
        }
        // this.setData({
        //   hours,
        //   minute
        // })
      } else if (dateParams !== 0) {
        for (let i = 0; i < 24; i++) {
          this.hours.push(i + '点')
        }
        for (let i = 0; i < 60; i += 10) {
          this.minute.push(i)
        }
        // this.setData({
        //   hours,
        //   minute
        // })
      }
    },
    closeTime () {
      this.timeFlag = false
    },
    enterTime () {
      console.log('预约时间' + ':' + this.aboutTime)
      this.timeFlag = false
    },
    // 时间选择
    changTime () {
      this.timeFlag = true
    },
    showCarType () {
      this.CarTypeState = true
    },
    typeEnterBtn () {
      this.CarTypeState = false
      this.CarType = this.checkboxChange()
      console.log(this.CarType)
    },
    ClickCarType () {
      this.CarTypeState = false
    },
    tabClick (e) {
      this.activeIndex = e.currentTarget.id
      this.currentTab = this.activeIndex
    },
    swiperChange (e) {
      this.currentTab = e.mp.detail.current
      this.activeIndex = this.currentTab
    },
    onAnimationfinish () {
      console.log('滑动完成.....')
    },
    rightBtnIcon () {
      if (this.activeIndex < 3 && this.activeIndex >= 0) {
        this.activeIndex += 1
        this.currentTab = this.activeIndex
        console.log(this.activeIndex)
      }
    },
    leftBtnIcon () {
      if (this.activeIndex <= 3 && this.activeIndex > 0) {
        this.activeIndex -= 1
        this.currentTab = this.activeIndex
      }
    },
    onChangeAddress () {
      let that = this
      wx.chooseLocation({
        success: function (res) {
          console.log(res)
          that.longitude = res.longitude
          that.latitude = res.latitude
          that.chooseAddress = res.name
        },
        fail: function (err) {
          console.log(err)
        }
      })
    },
    onChangeEndAddress () {
      let that = this
      wx.chooseLocation({
        success: function (res) {
          that.endAddress = res.address
          that.endLongitude = res.longitude
          that.endLatitude = res.latitude
          that.endDress = res.name
        },
        fail: function (err) {
          console.log(err)
        }
      })
    },
    showMap () {
      // if (this.endAddress) {
      wx.navigateTo({
        url: `../map/main?latitude=` + this.latitude + `&longitude=` + this.longitude + '&endLongitude=' + this.endLongitude + '&endLatitude=' + this.endLatitude
      })
      // }
    },
    checkboxChange (e) {
      // let type = e.mp.detail.value
      let text = []
      for (let i = 0; i < e.mp.detail.value.length; i++) {
        let aaa = e.mp.detail.value[i].split(',')
        console.log(aaa)
        text.push(aaa)
      }
      console.log(text)
    },
    saleInfo () {
      wx.navigateTo({
        url: '../map/main'
      })
    }
  },
  watch: {
    'activeIndex' (newVal) {
      if (newVal > 0 && newVal < 3) {
        this.leftIcon = false
        this.rightIcon = false
      } if (newVal === 3) {
        this.leftIcon = false
        this.rightIcon = true
      } if (newVal === 0) {
        this.leftIcon = true
        this.rightIcon = false
      }
    }
  },
  computed: {
    navbarSliderClass () {
      if (this.activeIndex === 0) {
        return 'navbar_slider_0'
      }
      if (this.activeIndex === 1) {
        return 'navbar_slider_1'
      }
      if (this.activeIndex === 2) {
        return 'navbar_slider_2'
      }
    },
    contentHeight () {
      console.log(this.winHeight)
      return this.winHeight - 80 + 'rpx'
    },
    curCity () {
      return this.$store.state.curCity
    }
  }
}
</script>

<style scoped>
  .content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 80rpx;
    -webkit-overflow-scrolling: touch;
  }
  .contain{
    position: relative;
  }
  .content_item{
    display: flex;
    flex-direction: column;
    align-items:center;
  }
  .navbar {
    display: flex;
    position: fixed;
    z-index: 500;
    top: 0;
    height: 80rpx;
    width: 100%;
    border-bottom: 1rpx solid #ccc;
  }
  .navbar_item {
    position: relative;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 13rpx 0;
    text-align: center;
    font-size: 0;
  }
  .navbar_item .navbar_item_on {
    color: #eb493c;
  }
  .navbar_title {
    color: #3b3b3b;
    font-weight: 500;
    display: inline-block;
    font-size: 28rpx;
    max-width: 8em;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
  }
  .navbar_item_on ::after{
    content: " ";
    width: 60%;
    display: block;
    border-radius: 4rpx;
    height: 4rpx;
    margin: 28rpx auto 0 auto;
    background-color: #eb493c;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
  }
.btnIcon{
  width: 710rpx;
  height: 35rpx;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top:190rpx;
  left:20rpx;
  z-index: 999;
}
.btnIcon>img,.btnIcon>div{
  width: 21rpx;
  height: 35rpx;
}
  .swiperImg{
    width: 100%;
    height: 420rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .swiper-img {
    width: 278rpx;
    height: 132rpx;
  }
  .swiper-car{
    width: 710rpx;
    height: 99rpx;
    margin: 80rpx auto 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #efefef;
  }
  .swiper-carInfo{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
  }
  .swiper-carInfoI{
    color: #b9b9b9;
    font-size: 22rpx;
    margin-left: 10rpx;
  }
  .carType{
    padding: 32rpx 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    border-top: 12rpx solid #f5f5f5;
    border-bottom: 12rpx solid #f5f5f5;
  }
  .carTypeInfo{
    font-size: 22rpx;
    color: #bfbfbf;
    max-width: 200rpx;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .BtnIcon{
    width: 21rpx;
    height: 35rpx;
    background: url("../../../../static/img/right.png") no-repeat center/cover;
    display: inline-block;
    margin-bottom: -9rpx;
  }
  .MyDress{
    height: 200rpx;
  }
  .price{
    height: 96rpx;
    padding: 42rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .cost{
    font-size: 44rpx;
    color: #ed493d;
    margin: 0 auto;
  }
  .sale{
    color: #bfbfbf;
    font-size: 22rpx;
  }
  .saleInfo{
    color: #ed493d;
  }
  .btn{
    width: 596rpx;
    line-height: 90rpx;
    color: #fff;
    font-size: 32rpx;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
  }
  .nowCar{
    width: 374rpx;
    text-align: center;
    background-color: #ed493d;
    border-top-left-radius: 50rpx;
    border-bottom-left-radius: 50rpx;
  }
  .yx{
    background-color: #ffb257;
    flex: 1;
    text-align: center;
    border-top-right-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
  }
  .MyDress>div{
    width: 690rpx;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100rpx;
  }
  .myDress{
    border-bottom: 1rpx solid #e3e3e3;
  }
  .stateIcon{
    width: 30rpx;
    height: 42rpx;
    background: url("~static/img/dw.png") no-repeat center/cover;
  }
  .endIcon{
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    border: 6rpx solid #f93c5a;
  }
  .MyDress>div>div{
    width: 640rpx;
    padding-left: 20rpx;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
  }
  .car-type{
    width: 670rpx;
    padding: 0 40rpx;
    height: 782rpx;
    background: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    box-shadow: 0rpx 0rpx 9rpx #333333;
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 28rpx;
  }
  .car-tit{
    text-align: center;
    width: 100%;
    border-bottom: 1rpx solid #f0f0f0;
    font-size: 32rpx;
    padding: 40rpx 0 30rpx 0;
    position: relative;
  }
  .car-close{
    position: absolute;
    width: 46rpx;
    height: 45rpx;
    display: inline-block;
    right: -23rpx;
    top: -14rpx;
    background: url("~static/img/del.png") no-repeat center/cover;
  }
  .checkbox{
    padding-right: 50rpx;
    margin-top: 40rpx;
    display: inline-block;
  }
  .checkBox{
    height: 194rpx;
  }
  .car-list{
    display: flex;
    padding: 30rpx 0;
    align-items: center;
  }
  radio{
    padding: 0 20rpx;
  }
  .car-btn{
    width: 300rpx;
    height: 60rpx;
    background-color: #ed493d;
    color: #fff;
    margin: 0 auto;
    line-height: 60rpx;
    text-align: center;
    border-radius: 25rpx;
  }
  .car-taps{
    padding-left: 20rpx;
  }
  .droverCountText{
    font-size:32rpx;
    text-align: center;
    height:90rpx;
    line-height:90rpx;
  }
  .driverChecked{
    height:90rpx;
    line-height:90rpx;
    font-size:32rpx;
  }
  .appointmentTimeContainer{
    width:750rpx;
    height:500rpx;
    background: #fff;
    position: fixed;
    bottom: 0rpx;
  }
  .change-time-title{
    display: flex;
    justify-content: space-between;
    font-size:26rpx;
    color:#ed493d;
    height: 100rpx;
    line-height:100rpx;
    border-bottom:2rpx solid #ddd;
    padding:0rpx 40rpx;
  }
  .change-time-title>div{
    padding: 0 20rpx;
  }
</style>
